<template>
  <br>
  <div class="form-inline">
    <div class="form-group form-group-sm">
      <select class="form-control" v-model="filter.type">
        <option value="0">港股股票</option>
        <option value="1">港股组合</option>
        <option value="2">A股股票</option>
        <option value="3">A股组合</option>
      </select>
    </div>
    <button class="btn btn-sm btn-primary" @click="getList">搜索</button>
  </div>
  <table v-show="list && list.length > 0" class="table table-bordered table-hover">
    <caption>推荐关注列表</caption>
    <thead>
      <tr>
        <th class="col-xs-2">类别</th>
        <th>组合ID/股票代码</th>
        <th>组合名称/股票简称</th>
        <th class="text-right">排序</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="it in list">
        <td>
          <div v-if="+it.type === 0">港股股票</div>
          <div v-if="+it.type === 1">港股组合</div>
          <div v-if="+it.type === 2">A股股票</div>
          <div v-if="+it.type === 3">A股组合</div>
        </td>
        <td>{{it.betaId || it.secuCode}}</td>
        <td>{{it.name}}</td>
        <td class="text-right">
          <button v-if="$index !==0 " class="btn btn-sm btn-success btn-move" @click="swap(it.id, list[$index - 1].id)">上移</button>
          <button v-if="$index !== (list.length-1)" class="btn btn-sm btn-success btn-move" @click="swap(it.id, list[$index + 1].id)">下移</button>
          <button class="btn btn-sm btn-move" v-if=" $index >= list.length - 1 " :style="{ opacity: 0, 'pointer-events': 'none' }">占位</button>
        </td>
        <td class="col-nowrap text-right">
          <button class="btn btn-sm btn-danger" @click="deleteItem(it.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script src="./recommend-list.js"></script>